<template>
  <div class="adminHandle" >
    <div class="psw" v-show="!ispass">
      <div style="padding-top: 10px">请输入旧密码：</div>
      <div @keydown.enter="checkout()" class="pswinput"><el-input v-model="oldpsw" placeholder="请输入旧密码" show-password></el-input></div>
      <div v-show="!ispass">
      <el-button type="primary" round @click="checkout()">密码校验<i class="el-icon-search el-icon--right"></i></el-button>
      </div>
      <div v-show="!ispass">
      <div v-show="iswrong" style="color: #da4f49;padding-top: 10px">密码错误</div>
      </div>
    </div>
    <div v-show="ispass" style="color: #189c08;padding-top: 10px;padding-left: 10px">验证通过</div>
    <div class="psw" v-show="ispass">
      <div style="padding-top: 10px">请输入新密码：</div>
      <div class="pswinput"><el-input v-model="newpsw" placeholder="请输入新密码" show-password></el-input></div>
    </div>
    <div class="psw" v-show="ispass">
      <div style="padding-top: 10px">再输入新密码：</div>
      <div @keydown.enter="submitpsw()" class="pswinput"><el-input v-model="newpsw2" placeholder="请再次输入新密码" show-password></el-input></div>
    </div>
    <div v-show="ispass" style="padding-top: 50px">
    <el-button type="primary" round @click="submitpsw()">更改密码<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name:"StudentPasswordEdit",
  data(){
    return{
      psw:{
        number:'',
        password: '',
      },
      oldpsw:'',
      realpsw:'123456',
      newpsw:'',
      newpsw2:'',
      ispass:false,
      iswrong:false,
    }
},
  methods:{
    checkout(){
      if(this.oldpsw === this.realpsw){this.ispass = true}
      else{this.iswrong = true}
    },
    submitpsw(){
      if(this.newpsw === this.newpsw2){
        this.realpsw = this.newpsw
        this.psw.password =this.newpsw2

        axios.defaults.headers.common["token"] = this.token;
        axios.put((this.ip + '/' + this.identity +'/'),JSON.stringify(this.psw),{headers:
            {'Content-Type':'application/json'}}).then((response)=>{
          console.log(response)
          console.log(response.data)
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('identity');
          window.location.href='/sign.html'
        }).catch(function (error) {
          console.log(error);
        });
      }
      else{alert("两次密码输入不一致")}
    }
  },
  mounted(){
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');
    this.identity = sessionStorage.getItem('identity')

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/' + this.identity +'/msg')).then((response)=>{
      console.log(response)
      console.log(response.data)
      this.realpsw = response.data.password
      this.psw.number = response.data.number

    }).catch(function (error) {
      console.log(error);
    });
  }

}
</script>

<style scoped>
.psw{
  display: flex;
  padding-top: 50px;
  justify-content: center;
}
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.pswinput{
  padding: 0px 5px;
  width: 50%;
}
</style>
